import React, { Component } from 'react'
import { NavBar, Button, Input, Divider, Toast } from 'antd-mobile';
import './index.less';
import github from './images/github.png';
import qq from './images/qq.png';
import wechat from './images/wechat.png';
import axios from 'axios';

export default class Login extends Component {
    state = {
        phone: '',
        code: ''
    }

    render() {
        return (
            <div className="login-container">
                {/* 顶部导航start */}
                <NavBar back={null}>手机验证码登录</NavBar>
                {/* 顶部导航end */}
                <div className="gap-5"></div>
                <div className="gap-5"></div>
                <div className="gap-5"></div>
                <div className="gap-5"></div>
                {/* 表单 start */}
                <div className="form">
                    <div className="phone">
                        <Input placeholder='请输入手机号' onChange={this.change('phone')} value={this.state.phone} />
                    </div>
                    <div className="gap-5"></div>
                    <div className="gap-5"></div>
                    <div className="code">
                        <Input placeholder='请输入验证码' onChange={this.change('code')} value={this.state.code} />
                        <Button onClick={this.sendCode}>获取验证码</Button>
                    </div>
                    <div className="gap-5"></div>
                    <div className="gap-5"></div>
                    <div className="gap-5"></div>
                    <div className="gap-5"></div>
                    <Button block color="danger" onClick={this.login}>登录</Button>
                </div>
                {/* 表单 end */}

                {/* 其他登录方式 start */}
                <div className="other-login">
                    <div className="line">
                        <Divider>其他登录方式</Divider>
                    </div>
                    <div className="login-img">
                        <div className="item">
                            <img src={github} alt="" />
                        </div>
                        <div className="item">
                            <img src={qq} alt="" />
                        </div>
                        <div className="item">
                            <img src={wechat} alt="" />
                        </div>
                    </div>
                </div>
                {/* 其他登录方式 end */}
                
                {/* 文字提示 start */}
                <p className="text">
                    未注册的手机号, 验证后会自动创建硅谷账号, 登录即代表您同意《硅谷隐私政策》
                </p>
                {/* 文字提示 end */}
                
            </div>
        )
    }

    //受控组件
    change = (type) => {
        //这里的 e 不再是事件对象, 是 input 元素的值
        return (e) => {
            this.setState({
                [type]: e
            })
        }
    }

    //发送验证码
    sendCode = async () => {
        //获取手机号
        let {phone} = this.state;
        //检查是否为手机号
        let reg = /^1\d{10}$/;
        //判断
        if(!reg.test(phone)){
            return Toast.show({
                icon: 'fail',
                content: '手机号格式错误',
            })
        }
        //调用接口
        let result = await axios.post('/login/digits', {phone: phone});

        if(result.data.code === 20000){
            Toast.show({
                icon: 'success',
                content: '发送成功'
            })
        }else{
            Toast.show({
                icon: 'fail',
                content: '发送失败,稍后再试'
            })
        }

    }

    //登录操作
    login = async () => {
        //获取手机号和验证码
        let {phone, code} = this.state;
        //验证手机号和验证码
        let reg = /^1\d{10}$/;
        if(!reg.test(phone)){
            return Toast.show({
                icon: 'fail',
                content: '手机号格式错误',
            })
        }
        //
        let reg2 = /^\d{6}$/;
        if(!reg2.test(code)){
            return Toast.show({
                icon: 'fail',
                content: '验证码格式错误',
            })
        }
        //发送请求
        let result = await axios.post('/login/phone', {phone, code});

        if(result.data.code !== 20000){
            return Toast.show({
                icon: 'fail',
                content: result.data.message,
            })    
        }else{
            return Toast.show({
                icon: 'success',
                content: '登录成功',
                afterClose: () => {
                    //跳转  /usercenter
                    this.props.history.push('/usercenter')
                }
            }) 
        }
    }
}
